<template>
  <div class="main">
    <div class="center-hd">
      <img :src="headimg" alt="" />
      <p class="center-mobile">{{ mobile }}</p>
      <div class="set"></div>
    </div>
    <div class="exclusive">
      <img
        src="https://img12.360buyimg.com/img/sundefinedxundefined_jfs/t1/122611/9/4148/9465/5ed9bdf5E2c29706e/7229d2c6b74c288e.png.webp"
        alt=""
      />
      <div class="exclusive-info">
        <p class="exclusive-info-tit">每月可领<span>150元</span>礼包</p>
        <p class="exclusive-info-bd">0元商品/无门槛神券任你选</p>
      </div>
      <button class="go">立即领取</button>
    </div>
    <div class="order">
      <div class="order-hd">
        <h3>我的订单</h3>
        <span>查看全部订单<i></i></span>
      </div>
      <div class="order-bd">
        <div class="order-bd-item">
          <img
            src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t1/48182/6/6009/3956/5d3abcf1E8d17b423/29627a34ae04d55d.png"
            alt=""
          />
          <span>待付款</span>
        </div>
        <div class="order-bd-item">
          <img
            src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t1/58091/32/5904/5093/5d3abd08Eee626e18/3375ebc9c9ef4465.png"
            alt=""
          />
          <span>待成团</span>
        </div>
        <div class="order-bd-item">
          <img
            src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t1/63697/8/5467/4622/5d3abd25E440159cf/7f21da6a59e0d5f3.png"
            alt=""
          />
          <span>待收货</span>
        </div>
        <div class="order-bd-item">
          <img
            src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t1/52168/8/5992/4426/5d3abd31E0c73d101/e956ff375436aa7d.png"
            alt=""
          />
          <span>待评价</span>
        </div>
        <div class="order-bd-item">
          <img
            src="https://wq.360buyimg.com/data/ppms/picture/afterSale.png"
            alt=""
          />
          <span>退换/售后</span>
        </div>
      </div>
    </div>
    <div class="prop">
      <div class="prop-item">
        <i>0<span>张</span></i>
        <span class="prop-item-msg">优惠券</span>
      </div>
      <div class="prop-item">
        <i>0<span>个</span></i>
        <span class="prop-item-msg">京豆</span>
      </div>
      <div class="prop-item">
        <i>0<span>张</span></i>
        <span class="prop-item-msg">礼品卡</span>
      </div>
      <div class="prop-item">
        <img
          src="https://img11.360buyimg.com/jdphoto/s80x80_jfs/t1/64763/16/5553/1237/5d3abd99E0258e3f8/a97fc153611a467a.png"
          alt=""
        />
        <span class="prop-item-msg">全部资产</span>
      </div>
    </div>
    <div class="collect">
      <div class="collect-item">
        <span>1</span>
        <i class="prop-item-msg">商品收藏</i>
      </div>
      <div class="collect-item">
        <span>3</span>
        <i class="prop-item-msg">店铺收藏</i>
      </div>
      <div class="collect-item">
        <span>3</span>
        <i class="prop-item-msg">关注主播</i>
      </div>
      <div class="collect-item">
        <span>0</span>
        <i class="prop-item-msg">我的足迹</i>
      </div>
    </div>
    <div class="serve">
      <div class="serve-item">
        <img
          src="https://img10.360buyimg.com/jdphoto/jfs/t1/56572/8/11729/4945/5d8acdddE25727c5e/87cf366bba377f22.png.webp"
          alt=""
        />
        <span>客户服务</span>
      </div>
      <div class="serve-item">
        <img
          src="https://img30.360buyimg.com/jdphoto/jfs/t1/72798/18/12787/5142/5da19e12E7ae742bb/5102b591816aeab1.png.webp"
          alt=""
        />
        <span>客户服务</span>
      </div>
      <div class="serve-item">
        <img
          src="https://img13.360buyimg.com/jdphoto/jfs/t1/80447/3/12914/5236/5da19d46E7a4ba184/e99e05f0b0a9bc52.png.webp"
          alt=""
        />
        <span>客户服务</span>
      </div>
      <div class="serve-item">
        <img
          src="https://img10.360buyimg.com/jdphoto/jfs/t1/45866/2/3848/2937/5d196320E143cdc8f/d797d7e22eadb4a9.png.webp"
          alt=""
        />
        <span>客户服务</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      mobile: 13141295406,
      headimg:
        "https://storage.360buyimg.com/i.imageUpload/6a645f3439313662393730613763333231353331393135363839383937_mid.jpg",
    };
  },
  created() {
    // // 发起请求，如果有 session 则自动 session 登录
    // this.$http({
    //   url: "http://42.193.117.107:3000/sql/session",
    //   method: "POST",
    //   withCredentials: true,
    // }).then((res) => {
    //   console.log(res);
    //   if (!(res.type === "error")) {
    //     this.headimg = res.headimg;
    //     this.mobile = res.username;
    //   }
    // });
  
 if(sessionStorage.getItem("session_id")){
    // console.log(sessionStorage.getItem("session_id"));
          const session_data = {data:(sessionStorage.getItem("session_id"))};
           axios.post("http://42.193.117.107:3000/sql/session",session_data,{heades:{
        "content-type" : "application/x-www-form-urlencoded" },
        withCredentials: true
     })
     .then((data) =>{
      //  console.log(data);

      // this.headimg = data['0'].headimg
      this.mobile = data['0'].username

     });

    }else{
      this.$router.push('/login')
      console.log("没session请登录")

    }

  },
};
</script>

<style scoped>
html,
body {
  height: 100%;
}
.main {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}

.center-hd {
  background-color: #fff;
  box-sizing: border-box;
  padding: 16px 20px 0;
  display: flex;
  height: 90px;
}
.center-hd img {
  margin-right: 15px;
  height: 60px;
  width: 60px;
  border-radius: 50%;
}
.center-mobile {
  flex: 1;
  line-height: 58px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.set {
  margin-top: 15px;
  width: 30px;
  height: 30px;
  background: url(https://img12.360buyimg.com/img/s60x60_jfs/t1/150365/4/12830/1362/5fe54985Eefc073a3/7028a3bf5e98e11a.png)
    scroll no-repeat 50% / contain;
}
.exclusive {
  padding: 0 10px;
  margin: 15px 0;
  display: flex;
  height: 63px;
  background-color: #fff;
  align-items: center;
}
.exclusive img {
  width: 45px;
  height: 45px;
  margin-right: 10px;
}
.exclusive-info {
  flex: 1;
}
.exclusive-info-tit {
  font-size: 14px;
  color: #333;
  font-weight: 700;
}
.exclusive-info-tit span {
  color: #ff4142;
}
.exclusive-info-bd {
  margin-top: 3px;
  font-size: 12px;
  color: #aaa;
}
.go {
  width: 86px;
  height: 30px;
  border-radius: 15px;
  background-image: linear-gradient(270deg, #ff4142, #ff4b2b);
  border: none;
  outline: none;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0.15rem 0.3rem 0 rgb(255 65 66 / 20%);
}
.order {
  background-color: #fff;
  margin: 15px 0;
}
.order-bd-item {
  width: 25%;
}
.order-hd {
  height: 49px;
  border-bottom: 1px solid #f5f5f5;
  line-height: 49px;
}

.order-hd h3 {
  float: left;
  font-size: 16px;
  color: #434343;
  padding-left: 10px;
}
.order-hd span {
  margin-right: 10px;
  float: right;
  font-size: 12px;
  color: #999;
}
.order-hd span i {
  display: inline-block;
  width: 6px;
  height: 10px;
  margin-left: 3px;
  background: url()
    no-repeat;
  background-size: 100%;
}
.order-bd {
  height: 60px;
  width: 100%;
  display: flex;
  margin-top: 6px;
  justify-content: space-around;
  align-items: center;
  text-align: center;
}
.order-bd img {
  width: 20px;
}
.order-bd span {
  display: block;
  font-size: 12px;
  color: #666;
}
.prop {
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: #fff;
}
.prop-item {
  width: 25%;
}
.prop-item i {
  font-style: normal;
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
.prop-item i span {
  font-size: 12px;
}
.prop-item img {
  width: 20px;
  height: 20px;
}
.prop-item-msg {
  display: block;
  font-size: 12px;
  color: #666;
}
.collect {
  margin: 15px 0;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: #fff;
}
.collect-item {
  width: 25%;
}
.collect-item span {
  font-size: 18px;
  color: #333;
  font-weight: 700;
}
.collect-item i {
  font-size: 12px;
  font-style: normal;
}
.serve {
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  background-color: #fff;
}
.serve-item {
  width: 25%;
}
.serve-item img {
  width: 32px;
  height: 32px;
}
.serve-item span {
  display: block;
  font-size: 12px;
  color: #666;
}
</style>